<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/home.css" />
		<link rel="stylesheet" href="css/reset.css" />
		 <script src="js/swiper-4.5.0/dist/js/swiper.min.js"></script>
		 <link rel="stylesheet" href="js/swiper-4.5.0/dist/css/swiper.min.css">

		
	</head>
	<body>
		<!-- logo栏搜索栏  疫情 公益 课程-->
		<div id="logo" class="clear">
			<div id="logoin">
				<p>九九学习网</p>
				<!--搜索栏-->
				<div id="search">
					<!--课程下拉-->
					<div id="class">
						<p>课程</p>
						<img id="sub" src="img/下标.png" />
						<div id="up">
							<!--hover后的内容-->
							<div>课程</div>
							<div>学校</div>
						</div>
					</div>
					<input placeholder="搜索课程"/>
					<img id="sear" src="img/search (2).png" />
				</div>
				<!--右边内容-->
				<div id="login" class="right">
					<a class="color">商务合作</a>
					<a id="client" class="color">客户端下载</a>
					<img id="course" src="img/kecheng (2).png" onclick="ht()"></img>
					<img id="setting" src="img/shezhi.png" onclick="st()"></img>
					<span>|</span>
					<a class="color" href="password.jsp">登录/注册</a><a class="color"></a>
					<img id="logi" onclick="login()" src="img/accountnumber (1).png" />
				</div>
			</div>
		</div>
		
		<!--广告轮播图-->
		<div id="adv">
			<div class="swiper-container">
				<div class="swiper-scrollbar"></div>
				   <div class="swiper-button-prev"></div>
				   <div class="swiper-button-next"></div>
				   <div class="swiper-wrapper">
				      <div class="swiper-slide" data-history="1" style="background-color: #2F30BC;"><img src="img/轮播图1.jpg"/></div>
				      <div class="swiper-slide" data-history="Slide 2" style="background-color: #253B60;"><img src="img/轮播图2.jpg"/></div>
				      <div class="swiper-slide" data-history="3" style="background-color: #56218F;"><img src="img/轮播图3.png"></div>
				      <div class="swiper-slide" data-history="Slide 4" style="background-color: #3564E6;"><img src="img/精英培训.png"/></div>
				 </div>
				 <div class="swiper-pagination"></div>
			</div>
		</div>
		
  			
		
		
		
		<!-- 分类学习 -->
		<div id="major">
			<p id="text">分类学习</p>
			<div class="image">
				<div class="imagesrc"><img src="img/jquery.png"/></div>
				<div  class="word"><p>前端学习</p><span>三个月速成网页制作</span></div>
			</div>
			<div class="image" style="margin-left: 20px;">
				<div class="imagesrc"><img src="img/css.png"/></div>
				<div  class="word"><p>UI设计</p><span>UI平面设计，24大课程教学</span></div>
			</div>
			<div class="image" style="margin-left: 20px;">
				<div class="imagesrc"><img src="img/java.png"/></div>
				<div  class="word"><p>产品运营</p><span>从0到1教你做产品运营</span></div>
			</div> 
			<div class="image" style="margin-left: 20px;">
				<div class="imagesrc"><img src="img/电商运营.png"/></div>
				<div  class="word"><p>电商运营</p><span>小白七天速成课</span></p></div>
			</div>
			
		</div>
		
		
		
		
		<!-- 热门课程限时秒杀 -->
		<div id="list">
			<p>热门课程限时秒杀</p>
			<div id="time">
				<span id="dt"></span>
				<span id="dt2">明天 10:00限时开抢</span>
				<span id="dt3">明天 22:00限时开抢</span>
				<span id="dt4">后天 22:00限时开抢</span>
			</div>
			<div id="limit" class="clear">
				<div id="limit1" class="limitclass">
					<img id="img111" src="img/HTML入门系列.png" />
					<h3 id="text1">HTML入门系列</h3>
					<p>¥9.9</p>
					<span>¥389</span>
					<a>点击抢购</a>
					<span></span>
				</div>
				<div id="limit2" class="limitclass">
					<img id="img222" src="img/ui设计.png" />
					<h3 id="text2">UI设计入门系列</h3>
					<p>¥19.9</p>
					<span>¥499</span>
					<a>未开始</a>
				</div>
				<div id="limit3" class="limitclass">
					<img id="img333" src="img/数据.png" />
					<h3 id="text3">大数据入门系列</h3>
					<p>¥19.9</p>
					<span>¥465</span>
					<a>未开始</a>
				</div>
				<div id="limit4" class="limitclass">
					<img id="img444" src="img/Excel入门.png" />
					<h3 id="text4">Excel入门系列</h3>
					<p>¥19.9</p>
					<span>¥199</span>
					<a>未开始</a>
				</div>
				<div id="limit5" class="limitclass">
					<img id="img555" src="img/Python入门.jpg" />
					<h3 id="text5">Python入门系列</h3>
					<p>¥19.9</p>
					<span>¥669</span>
					<a>未开始</a>
				</div>
			</div>
		</div>
		
		
		<!--九九校园学习网介绍-->
		<div id="campus" class="clear">
			<span>校园活动</span>
			<a class="right">更多活动>>></a>
			<div id="img"><img id="yiqing" src="img/防疫高清.jpg" /><img id="biye" src="img/毕业扔书.png"/></div>
		</div>
		
		<!--底栏-->
		<div id="bottom">
			<p>Copyright © 2020 NIEE NINE Network.</p>
			<p>九九校园网|九九校园网服务协议|隐私政策|侵权投诉|问题反馈|帮助</p>
		</div>
		
		<!--悬浮栏-->
		<div id="suspend">
			<a class="sus" href="#logo"><img src="img/导航栏.png"/></a>
			<a class="sus" href="#list"><img src="img/学习分类.png"/></a>
			<a class="sus" href="#major"><img src="img/秒杀.png"/></a>
			<a class="sus" href="#campus"><img src="img/校园活动.png"/></a>
		</div>
		
		
		
		<!--       右上角音乐及图标-->
		<section class="u-audio clear">
			<audio src="img/111.mp3" autoplay="autoplay" id="music" preload loop="loop"></audio>
			<div id="page1">
				<img id="rallback" src="img/normalmusic.png" style="width: 60px;height: 60px;"></img>
			</div>
			<div id="fly">
				<img id="yinle1" src="img/yinle (1).png"/>
				<img id="yinle2" src="img/yinle (2).png" />
				<img id="yinle3" src="img/yinle (3).png" />
				<img id="yinle4" src="img/yinle (4).png"/>
				<img id="yinle5" src="img/yinle (5).png"/>
				<img id="yinle6" src="img/yinle (6).png"/>
				<img id="yinle7" src="img/yinle (7).png"/>
			</div>
		</section>
		<!--       右上角音乐及图标-->
		
		
			<script type="text/javascript" src="js/home.js" ></script>
	</body>
</html>
